<template>
  <el-table ref="tableRef" :data="data" v-loading="config.loading" :cell-style="{ 'text-align': 'center' }"
    @selection-change="handleSelectionChange" @select="singleCheck"  @sort-change="handleSortChange" row-key="id" :header-row-class-name="disableHeaderCheckbox ? 'disabled-header-checkbox' : ''" style="width: 100%;height:100%;padding:10px 0 10px 0">

    <el-table-column type="selection" width="55" header-align="center" :reserve-selection="true" v-if="config.isSelection" />
    <el-table-column type="index" label="序号" header-align="center" width="55" v-if="config.isList" />

    <el-table-column header-align="center" v-for="(item, index) in setHeader" :key="index"
      :show-overflow-tooltip="false" :prop="item.key" :min-width="item.colWidth" :formatter="item.formatter"
      :fixed="item.fixed" :sortable="item.sortable">

      <template #header>
        <el-tooltip v-if="item.isTooltip" :content="item.tooltip" effect="dark" placement="top">
          <el-button link>
            {{ item.title }}
            <el-icon class="el-icon--right">
              <QuestionFilled />
            </el-icon>
          </el-button>
        </el-tooltip>
        <span v-else>{{ item.title }}&nbsp;</span>
      </template>
      <template v-slot="scope">
        <template v-if="item.type === 'remark'">
          <template v-for="(val, index) in item.buttons" :key="index">
            <el-button size="small" v-show="(val.isShow ? val.isShow(scope.row) : true)" :type="val.type"
              :icon="val.icon" @click="handleAction(val.command, scope.row)">
            </el-button>
          </template>
        </template>
       
        <template v-if="item.type === 'operate'">
          <template v-if="checkOperateEmpty(scope.row, item)">--</template>
          <template v-else>
            <template v-for="(val, index) in item.buttons" :key="index">
              <el-popconfirm v-if="val.isPopconfirm === true" confirm-button-text="确认" cancel-button-text="取消"
                  :icon="InfoFilled" :title="val.popconfirmTitle" @confirm="handleAction(val.command, scope.row,val.parameter)">
                  <template #reference>
                    <el-button v-show="val.isShow ? val.isShow(scope.row) : true" :type="val.type" :icon="val.icon"
                      size="small">
                      {{ val.name }}
                    </el-button>
                  </template>
              </el-popconfirm>
              <el-tooltip v-else-if="val.isSwitch" class="box-item" effect="dark" :content="val.content" placement="top">
                <el-switch v-model="scope.row[val.key]" @change="handleAction(val.command, scope.row,val.parameter)"
                  :disabled="val.isShow ? val.isShow(scope.row) : true"
                  style=" --el-switch-on-color: #13ce66; --el-switch-off-color: #efefef;padding-left: 10px" />
              </el-tooltip>
              <el-tooltip v-else-if="val.content" class="box-item" effect="dark" :content="val.content" placement="top">
                <el-button size="small" v-show="(val.isShow ? val.isShow(scope.row) : true) && !val.isPopconfirm" :type="val.type" :icon="val.icon" @click="handleAction(val.command, scope.row,val.parameter)">{{ val.name }}</el-button>
              </el-tooltip>
              <uploadFile v-else-if="val.upload" ref="uploadFileRef" @uploadSuccess="uploadSuccess($event, val.command, scope.row)" v-show="(val.isShow ? val.isShow(scope.row) : true) && !val.isPopconfirm" :drag="false" :limit="5"></uploadFile>
              <template v-else-if="val.isShow ? val.isShow(scope.row) : true">
                <el-tooltip v-if="val.showOnlyKey" class="box-item" effect="dark" :content="scope.row[item.key]" placement="top">
                  <span class="text-ellipsis">{{ scope.row[item.key] }}</span>
                </el-tooltip>
                <el-button size="small" link v-show="!val.isPopconfirm" :type="val.type ? val.type : (val.name == '删除'? 'danger' : 'primary')" :icon="val.icon" @click="handleAction(val.command, scope.row,val.parameter)">{{ val.name }}</el-button>
              </template>
            </template>
          </template>
        </template>

        <template v-else-if="item.type === 'remark'">
          <el-tooltip :content="scope.row.remark">
            <span class="remark">{{ scope.row.remark }}</span>
          </el-tooltip>
        </template>

        <template v-else-if="item.type === 'image'">
          <!-- {{ scope.row[item.key] }} -->
          <img :src="scope.row[item.key]" :width="item.width" :height="item.height" />
        </template>
        <!-- 售箱城市 -->
        <template v-else-if="item.type === 'cityName'">
          <div style="display: flex;justify-content: center;align-items: center;">
            <div style="max-height: 120px;overflow: hidden;display: inline-block; width: 50%;">
              <img :src="scope.row.imgUrl" style="width: 100%;display: inline-block;float: left;" />
            </div>
            <div class="cityName">
                <span style="font-weight: 700;">{{ scope.row.carryCityName }}</span>
                <span>{{ scope.row.carryCountryName }}</span>
            </div>
          </div>
        </template>

        <template v-else-if="item.type === 'city'">
          <!-- {{ scope.row }} -->
          <div style="display: flex;">
            <div style="max-height: 120px;overflow: hidden;display: inline-block; width: 50%;">
              <img :src="scope.row.imgUrl" style="width: 100%;display: inline-block;float: left;" />
            </div>
            
            <div class="city" style="display: inline-block;width: 50%;margin: auto;">
              <div class="carryCity">
                <span style="font-weight: 700;">{{ scope.row.carryCityName }}</span>
                <span>{{ scope.row.carryCountryName }}</span>
              </div>
              <img src="@/assets/icons/svg/right.svg" alt="">
              <div class="returnCity">
                <span style="font-weight: 700;">{{ scope.row.returnCityName }}</span>
                <span>{{ scope.row.returnCountryName }}</span>
              </div>
            </div>
        </div>
        </template>

        <template v-else-if="item.type === 'hdCity'">
          <img :src="scope.row.imgUrl" style="height: 125px; width: 40%;display: inline-block;float: left;" />
          <div class="hdCity" style="height: 125px; display: flex;justify-content: center;align-items: center;">
            <el-tooltip effect="dark" :content="scope.row.carryCityListString" placement="top">
              <span class="hdCarryCity text-ellipsis">{{ scope.row.carryCityListString }}</span>
            </el-tooltip>
            <img src="@/assets/icons/svg/right.svg" alt="">
            <el-tooltip effect="dark" :content="scope.row.returnCityListString" placement="top-start">
              <span class="hdReturnCityList text-ellipsis">{{ scope.row.returnCityListString }}</span>
            </el-tooltip>
          </div>
        </template>        
        <template v-else-if="item.type === 'carryCityNameNew'">
            <div style="font-weight: 700;">{{ scope.row[item.key] || '--'}}</div>
            <div>{{ scope.row[item.key2] || '--'}}</div>
        </template>
        <!-- 多个城市、拼接 -->
        <template v-else-if="item.type === 'moreCity'">
          <template v-if="scope.row[item.key]">
            <el-tooltip effect="dark" :content="splitSrray(scope.row[item.key])" placement="top">
              <span class="text-ellipsis">
                {{splitSrray(scope.row[item.key])}}
              </span>
            </el-tooltip>
          </template>
          <template v-else>--</template>
          
        </template>
        <!-- <template v-else-if="item.type === 'code'">
          <el-tag :type="setStatusTagColor(scope.row[item.key], item.options)">
            {{ getLabel(scope.row[item.key], item.options) }}
          </el-tag>
        </template> -->
        <!-- <template v-else-if="item.type === 'Switch'">
          <el-switch v-model="scope.row.isInUse" :active-value="'1'" :inactive-value="'0'"
            @change="beforeChange(scope.row, item.url)" />
        </template> -->

        <template v-else-if="item.type === 'filter'">
          <span v-if="item.cFilter" :style="{ color: item.cFilter[scope.row[item.key]] }">
            {{ item.filter[scope.row[item.key]] }}
          </span>
          <span v-else-if="item.roleType == 'hd'">
            {{statusChangHd(scope.row,item)}}
          </span>
          <span v-else-if="item.roleType == 'xd'">
            {{statusChangXd(scope.row,item)}}
          </span>
          <span v-else-if="item.roleType == 'xdHd'">
            {{statusChangXdJK(scope.row,item,'xd')}}
          </span>
          <span v-else-if="item.roleType == 'hdHd'">
            {{statusChangXdJK(scope.row,item,'hd')}}
          </span>
          <span v-else>{{ item.filter[scope.row[item.key]] }}</span>
        </template>

        <template v-else-if="item.type === 'filter1'">
          <span v-if="item.cFilter" :style="{ color: item.cFilter(scope.row) }">
            {{ scope.row[item.key] }}
          </span>
          <span v-else>{{ item.filter[scope.row[item.key]] }}</span>
        </template>
        <template v-else-if="item.type === 'filter2' ">
          <template v-if="item.key2">
            <template v-if="scope.row[item.key2] == 1">
              <span v-if="scope.row[item.key] == '5'" style="color:#2158F3">未收</span>
              <span v-if="scope.row[item.key] == '10'" style="color:#22A86D">已收</span>
              <span v-if="scope.row[item.key] == '15'" style="color:#f00">退款</span>
            </template>
            <template v-if="scope.row[item.key2] == -1">
                <span v-if="scope.row[item.key] == '5'" style="color:#2158F3">未付</span>
                <span v-if="scope.row[item.key] == '10'" style="color:#22A86D">已付</span>
                <span v-if="scope.row[item.key] == '15'" style="color:#f00">退款</span>
            </template>
          </template>
          <span v-else>--</span>
        </template>

        <template v-else-if="item.type === 'add'">
          <template v-if="scope.row[item.key]">
            <span v-if="item.currency && scope.row[item.key]">
              <span>{{ scope.row[item.currency] == 'CNY' ? '￥' : '$' }}</span>
                {{ Number(scope.row[item.key] || '--').toLocaleString() }}
            </span>
            <span v-else>
              <span v-if="scope.row[item.key] && item.before">{{ item.before }}</span>
                {{ Number(scope.row[item.key]).toLocaleString() || '--' }}
              <span v-if="scope.row[item.key] && item.after">{{ item.after }}</span>
            </span>
          </template>
          <template v-else>--</template>
        </template>
        <template v-else-if="item.type === 'twoRow'">
          <span class="text-overflow">
            <el-tooltip  class="box-item" effect="dark" :content="scope.row[item.key]" placement="top-start" >
              <span>{{ scope.row[item.key] }}</span>
            </el-tooltip>
          </span>
          <br>
          <span style="color:#2158F3;font-size: 12px;">{{ scope.row[item.key2] }}</span>
        </template>

        <template v-else-if="item.type === 'range'">
          <template v-if="scope.row[item.key] && scope.row[item.key2]">
            <span>{{ formatDate(scope.row[item.key], 2) }}</span>
            ~
            <span>{{ formatDate(scope.row[item.key2], 2) }}</span>
            <div v-if="scope.row.status==5 || scope.row.status==10 || scope.row.status==15" style="color:#2158F3">
              <span v-if="scope.row?.residueReturnDays<0">已过期</span>
            </div>
          </template>
          <template v-else>
            --
          </template>
        </template>

        <template v-else-if="item.type === '<a>'">
          <span class="productSpan" @click="handleAction(item.command, scope.row,item.parameter)">
            <span v-if="scope.row[item.key]">{{ scope.row[item.key] }}</span>
          </span>
          <br>
          <span style="color:#2158F3">{{ scope.row[item.key2] }}</span>
        </template>
        <template v-else-if="item.type === '<aNo>'">
          <span class="productSpan"  v-if="scope.row.refType==30" @click="handleAction(item.command, scope.row)">
            <span>{{ scope.row[item.key] }}</span>
          </span>
          <span v-else style="color: #409EFF;">--</span>
        </template>
        <template v-else-if="item.type === '<aTwo>'">
          <span class="productSpan"  v-if="scope.row.billStatus==10" @click="handleAction(item.command, scope.row)">
            <span>{{ scope.row[item.key] }}</span>
          </span>
          <span v-else style="color: #666;">{{ scope.row[item.key] || '--'}}</span>
        </template>
        <template v-else-if="item.type === '<change>'">
          <span class="productSpan" @click="handleAction(item.command, scope.row)">
            <span v-if="scope.row[item.key]">{{ scope.row[item.key] }}</span>
            <!-- <span v-else>{{ item.key }}</span> -->
          </span><br>
          <span style="display: block;color:#2158F3;">{{ scope.row[item.key2] ? '换' : '' }}</span>
          <span style="display: block;color:#2158F3;">{{ scope.row[item.key3] == 15 ? '外调' : '' }}</span>
        </template>

        <template v-else-if="item.type === '/'">
          <el-tooltip :content="formatCity(scope.row[item.key], item.key2)"  placement="top">
            <span class="text-overflow" style="display: block;">{{ formatCity(scope.row[item.key], item.key2) || '--'}}</span>
          </el-tooltip>
        </template>

        <!-- 时间 -->
        <template v-else-if="item.type === 'dateTime'">
          {{ formatDate(scope.row[item.key],4) || '--' }}
        </template>
         <!-- 创建日期 -->
        <template v-else-if="item.type === 'checkTime'">
          {{ formatDate(scope.row[item.key]) || '--' }}
        </template>

        <!-- 日期 -->
        <template v-else-if="item.type === 'date'">
          <template v-if="scope.row[item.key]">{{ formatDate(scope.row[item.key],(item.timeDuration ? item.timeDuration : 2)) }}</template>
          <template v-else>
            <el-button v-if="scope.row.returnBoxStatus < 20 && !scope.row[item.key] && item.showEditPen" link
              @click="handleAction(item.command, scope.row)" icon="FolderAdd"></el-button>
            <span v-else>--</span>
          </template>
          <template v-if="scope.row[item.key] && scope.row[item.key2]" style="color:#2158F3">
            所离堆场 - {{ scope.row[item.key2] || null }}
          </template>
          <el-button v-if="scope.row.returnBoxStatus < 20 && scope.row[item.key] && item.showEditPen" link
            @click="handleAction(item.command, scope.row)" icon="EditPen"></el-button>
        </template>

        <!-- 天数 -->
        <template v-else-if="item.type === 'day' || item.type === 'number'">
          {{ scope.row[item.key] || 0 }}
          <div v-if="scope.row[item.key] && scope.row[item.key2]" style="color:#2158F3">
            所离堆场 - {{ scope.row[item.key2] || null }}</div>
        </template>
        <!-- 其他 -->
        <template v-else-if="item.type === 'loginName'">
          <el-tooltip v-if="scope.row[item.key]" :content="scope.row[item.key]" placement="top">
            {{ scope.row[item.key] || '--' }}
          </el-tooltip>
          <span v-else>--</span>
        </template>
       
        <template  v-else-if="item.type === 'boxInfo'">
            {{scope.row[item.key]}}天
        </template>
        <template v-else-if="item.type === 'phoneNumber'">
          <span v-if="item.areaCode && scope.row[item.key]">
          +{{scope.row[item.areaCode]}} &nbsp;{{ scope.row[item.key] || '--'}}
          </span>
          <span v-else>--</span>
        </template>
        <!-- 有效期范围判断状态是否展示 单个字段 -->
        <template v-else-if="item.type === 'rangeStatus'">
          <el-tooltip :content="scope.row.packingValidityPeriod">
            <span class="text-overflow">{{ scope.row.packingValidityPeriod }}</span>
          </el-tooltip>
          <div v-if="scope.row.status==5 || scope.row.status==10 || scope.row.status==15" style="color:#2158F3">
            <span v-if="scope.row?.residuePackingDays<0">已过期</span>
          </div>
        </template>
         <!-- 有效期范围判断状态是否展示 双字段 -->
         <template v-else-if="item.type === 'rangeStatus2' && scope.row[item.key]">
          <el-tooltip :content="formatDate(scope.row[item.key],2)  + '~' + formatDate(scope.row[item.key2],2)" placement="top">
            <span class="text-overflow">{{ formatDate(scope.row[item.key],2) }} ~ {{ formatDate(scope.row[item.key2],2) }}</span>
          </el-tooltip>
          <div v-if="scope.row.status==5 || scope.row.status==10 || scope.row.status==15" style="color:#2158F3">
            <span v-if="scope.row?.residuePackingDays<0">已过期</span>
          </div>
        </template>
        <!-- 剩余天数 -->
        <template v-else-if="item.type === 'days'">
          <template v-if="scope.row[item.key]">
            <span>
              <span v-if="scope.row?.status < 20 || scope.row?.packingStatus < 20 || scope.row?.returnBoxStatus<20">
                <span :class="scope.row[item.key]>0? 'daysItem':'days'">
                  {{ scope.row[item.key] }}<span v-if="scope.row[item.key] && item.after">{{ item.after }}
                </span>
                </span>
              </span>
              <span v-else>--</span>
            </span>
          </template>
          <template v-else>--</template>
        </template>
        <!-- 应收应付 -->
        <template v-else-if="item.type === 'amount'">
          <span>¥{{ scope.row[item.key] }} | ${{ scope.row[item.key2] }}</span>
        </template>
         <!-- 财务状态 -->
        <template v-else-if="item.type === 'writeOffStatus'">
          <template v-if="scope.row[item.key]">
              <span v-if="scope.row[item.key]==5" class="corol-red">未建账单</span>
              <span v-else-if="scope.row[item.key]==10" class="corol-blue">已建账单</span>
              <span v-else-if="scope.row[item.key]==15" class="corol-blue">已对账</span>
          </template>
          <template v-else>--</template>
        </template>
        <!-- 财务账单状态 -->
        <template v-else-if="item.type === 'billStatus'">
          <template v-if="scope.row[item.key]">
              <span v-if="scope.row.billStatus==5" style="color: #FFAA00;">未对账</span>
              <span v-else-if="scope.row.billStatus==10" style="color: #999999;">已撤销</span>
              <span v-else-if="scope.row.billStatus==15" style="color: #FF4242;">未核销</span>
              <span v-else-if="scope.row.billStatus==20" style="color: #2158F3;">部分核销</span>
              <span v-else-if="scope.row.billStatus==25" style="color: #22A86D;">已核销</span>
          </template>
          <template v-else>--</template>
        </template>
        <!-- 提箱状态 -->
        <template v-else-if="item.type === 'statusTixiang'">
          <template v-if="scope.row[item.key]">
              <span v-if="scope.row[item.key]==5" style="color: #0364FF;">已发放</span>
              <span v-else-if="scope.row[item.key]==10" style="color: #7E47FF;">已下载</span>
              <span v-else-if="scope.row[item.key]==15" style="color: #FFCC01;">提箱中</span>
              <span v-else-if="scope.row[item.key]==20" style="color: #22A86D;">已完成</span>
              <span v-else-if="scope.row[item.key]==25" style="color: #FF4B40;">已作废</span>
              <span v-else-if="scope.row[item.key]==30" style="color: #666666;">已过期</span>
          </template>
          <template v-else>--</template>
        </template>
        <!-- 还箱状态 -->
        <template v-else-if="item.type === 'statusHuanxiang'">
          <template v-if="scope.row[item.key]">
              <span v-if="scope.row[item.key]==5" style="color: #0364FF;">已发放</span>
              <span v-else-if="scope.row[item.key]==10" style="color: #7E47FF;">已下载</span>
              <span v-else-if="scope.row[item.key]==15" style="color: #FFCC01;">还箱中</span>
              <span v-else-if="scope.row[item.key]==20" style="color: #22A86D;">已完成</span>
              <span v-else-if="scope.row[item.key]==25" style="color: #FF4B40;">已过期</span>
          </template>
          <template v-else>--</template>
        </template>
        <!-- 结算流向 -->
        <template v-else-if="item.type === 'settlementDirection'">
          <template v-if="scope.row[item.key]">
              <span>{{ scope.row.settlementDirection==1 ? '应收': '应付' }}</span>
          </template>
          <template v-else>--</template>
        </template>
        <template v-else-if="item.type === 'calculate'">
          <template v-if="scope.row[item.key] && scope.row[item.key2]">
             {{scope.row[item.key] * scope.row[item.key2]}}
          </template>
          <template v-else>
                  --
          </template>
        </template>
        <template v-else-if="item.type === 'storageFeeCurrency'">
          <template v-if="scope.row[item.key]">
              <span>{{ scope.row.storageFeeCurrency == 'CNY' ? '￥' : '$' }}</span>
          </template>
          <template v-else>--</template>
        </template>
        <template v-else-if="item.type === 'dialog'">
            {{formatDate(scope.row[item.key],2)}}
            <template v-if="scope.row[item.containerClassify] != 15">
                <template v-if="scope.row[item.key2] == '10' && scope.row[item.key1]  == item.showVal && item.icon == 'EditPen'" > 
                    <el-icon class="edit-pen" @click="handleAction(item.command, scope.row)"><EditPen /></el-icon>
                </template>
            </template>
            
        </template>
        <template v-else-if="item.type === 'companyName'">
          <div v-if="scope.row.containerClassify === 10">
              <el-tooltip  class="box-item" effect="dark" :content="scope.row.outBoxCompanyName" placement="top-start" >
                <div class="nameText"> {{ scope.row.outBoxCompanyName || '--'}}</div>
              </el-tooltip>
          </div>
          <div v-else>
              <el-tooltip  class="box-item" effect="dark" :content="scope.row.companyName" placement="top-start" >
                <div class="nameText"> {{ scope.row.companyName || '--'}}</div>
              </el-tooltip>
          </div>
        </template>
        
        <!-- 已读未读 -->
        <template v-else-if="item.type === 'statusMsg'">
            <span v-if="scope.row.status === 5" class="corol-red">未读</span>
            <span v-else-if="scope.row.status === 10" class="corol-blue">已读</span>
        </template>
        <template v-else-if="item.type === 'statusMsg'">
            <span v-if="scope.row.status === 5" class="corol-red">未读</span>
            <span v-else-if="scope.row.status === 10" class="corol-blue">已读</span>
        </template>
        <template v-else-if="item.type === 'platformMsg'">
            <span v-if="scope.row.status === 5" class="corol-red">待发布</span>
            <span v-else-if="scope.row.status === 10" class="corol-blue">已发布</span>
            <span v-else-if="scope.row.status === 15" class="corol-blue">已撤销</span>
        </template>
        <template v-else-if="item.type === 'mobile'">
            <template v-if="(scope.row.mobile)?.length == '11'">{{ checkHidePhone(scope.row.mobile)}}</template>
            <template v-else>--</template>
        </template>
        <template v-else-if="item.type === 'mobileCode'">
          <template v-if="scope.row[item.key]">
            <span class="mobileCode">+{{ scope.row[item.key2] || ''}} </span>
            <span>{{ scope.row[item.key] }}</span>
          </template>
          <template v-else>--</template>
        </template>
        <template v-else-if="item.type === 'totalQuantity'">
          <template v-if="scope.row[item.key] || scope.row[item.key]==0">
            <span>{{ scope.row[item.key] || 0}}</span>
          </template>
          <template v-else>0</template>
        </template>
        <template v-else-if="item.type === 'quantity'">
          <template v-if="scope.row[item.key] || scope.row[item.key]==0">
            <span>{{ scope.row[item.key] -  scope.row[item.key2]}}</span>
          </template>
          <template v-else>0</template>
        </template>
        <template v-else>
          <span class="text-overflow">
            <el-tooltip  class="box-item" effect="dark" :content="scope.row[item.key] || '--'" placement="top-start" >
                <span>{{ scope.row[item.key] || '--' }}</span>
            </el-tooltip>
          </span>
        </template>
      </template>
    </el-table-column>
    <template #empty>
      <el-empty description="暂无数据" />
    </template>
  </el-table>
  <div class="fee-main" v-if="AmountAllIs">
    <div class="fee-item">总计</div>
    <div class="fee-item">应收金额：<span class="corol-red">¥{{ getBillSumAmountAll?.sumBillCnyAmount || 0 }}</span></div>
    <div class="fee-item">应收金额：<span class="corol-red">${{ getBillSumAmountAll?.sumBillUsdAmount || 0 }}</span></div>
    <div class="fee-item">应付金额：<span class="corol-red">¥{{ getBillSumAmountAll?.sumDeductBillCnyAmount || 0 }}</span></div>
    <div class="fee-item">应付金额：<span class="corol-red">${{ getBillSumAmountAll?.sumDeductBillUsdAmount || 0 }}</span></div>
    <div class="fee-item">已核销金额：<span class="corol-red">¥{{ getBillSumAmountAll?.sumPaidBillCnyAmount || 0 }}</span></div>
    <div class="fee-item">已核销金额：<span class="corol-red">${{ getBillSumAmountAll?.sumPaidBillUsdAmount || 0 }}</span></div>
    <div class="fee-item">未核销金额：<span class="corol-red">¥{{ getBillSumAmountAll?.sumUnpaidBillCnyAmount || 0 }}</span></div>
    <div class="fee-item">未核销金额：<span class="corol-red">${{ getBillSumAmountAll?.sumUnpaidBillUsdAmount || 0 }}</span></div>
  </div>
  <div class="fee-main" v-if="sumAmount">
    <div class="fee-item">总计</div>
    <div class="fee-item">应收金额：<span class="corol-red">¥{{ getSumAmountAll?.sumReceivableFeeDetailsCnyAmount || 0 }}</span></div>
    <div class="fee-item">应收金额：<span class="corol-red">${{ getSumAmountAll?.sumReceivableFeeDetailsUsdAmount || 0 }}</span></div>
    <div class="fee-item">应付金额：<span class="corol-red">¥{{ getSumAmountAll?.sumPayableFeeDetailsCnyAmount || 0 }}</span></div>
    <div class="fee-item">应付金额：<span class="corol-red">${{ getSumAmountAll?.sumPayableFeeDetailsUsdAmount || 0 }}</span></div>
  </div>
  <el-pagination v-if="config.isPagination" v-model:current-page="state.page.pageNum"
    v-model:page-size="state.page.pageSize" :pager-count="5" :page-sizes="[10, 20, 50, 100]" :total="config.total"
    background layout="total,sizes,prev, pager, next,jumper" @size-change="onHandleSizeChange"
    @current-change="onHandleCurrentChange" size="small" style="float: right;" />
</template>

<script setup lang="ts">
import { InfoFilled, EditPen, FolderAdd, SwitchButton, } from '@element-plus/icons-vue'
import { computed, onMounted, reactive, ref ,watch, nextTick} from 'vue';
import { formatDate,warTime } from '@/utils'
import uploadFile from '@/components/upload/index.vue'

const emit = defineEmits(['pageChange', 'handleAction',"updateSelectAll","goAddPackingRecord","sortChange"])
const tableRef = ref()
// const emit = defineEmits()
const switchMap = ref()
// 定义父组件传过来的值
const props = defineProps({
  // 列表内容
  data: {
    type: Array,
    default: () => [],
  },
  // 表头内容
  header: {
    type: Array,
    default: () => [],
  },
  // 配置项
  config: {
    type: Object,
    default: () => { },
  },
  // 表头按钮
  button: {
    type: Array,
    default: () => [],
  },
  //合计
  getBillSumAmountAll: {
    type: Object,
    default: () => { },
  },
 //合计
  getSumAmountAll: {
    type: Object,
    default: () => { },
  },
  isAllCheck:{
    type: Boolean,
    default:false
  },
  allId:{ // 使用全选功能时使用
    type: Array,
    default:() => []
  },
  disableHeaderCheckbox:{
    type: Boolean,
    default: true
  }
});
// 获取父组件 配置项（必传）
// const getConfig = computed(() => {
//   return props.config;
// });
// 设置 tool header 数据 
// eg: maybe wrong ?
const setHeader = computed(() => {
  return props.header.filter((v:any) => v.isCheck);
});
const commands = computed(() => {
  props.button.map((v:any) => {
    v.isShow = (row: any) => {
      return v.isShow ? v.isShow(row) : true;
    };
  });
  return props.button;
});

const state = reactive({
  page: {
    pageNum: 1,
    pageSize: 10
  }
});

const AmountAllIs=ref(false)
watch(() => props.getBillSumAmountAll, (newVal, oldVal) => {
  AmountAllIs.value=true
});
const sumAmount=ref(false)
watch(() => props.getSumAmountAll, (newVal, oldVal) => {
  sumAmount.value=true
});



//状态回显货代
const statusChangHd=(row,item)=>{
    let name=''
    if(item.id == 0){ //全部
      item.num += item1.totalQty
    }else if(item.id == 2 && item1.status ==2){ //待确认
        item.num += item1.totalQty
    }else if(item.id == 3 && item1.status == 3){ //待审核
        item.num += item1.totalQty
    }else if(item.id == 5 && item1.status == 5){ //待开提箱单
        item.num += item1.totalQty
    }else if(item.id == 10 && item1.status == 10 ){ //待提
        item.num += item1.totalQty
    }else if(item.id == 15 && item1.status == 15){ //已提
        item.num += item1.totalQty
    }else if(item.id == 20 && item1.status == 20){ //待还
        item.num += item1.totalQty
    }else if(item.id == 25 && item1.status == 25){ //已还
        item.num += item1.totalQty
    }else if(item.id == 30 && item1.status == 30){ //已完成
        item.num += item1.totalQty
    }else if(item.id == 40 && item1.status == 40){ //待取消
        item.num += item1.totalQty
    }else if(item.id == 35 && item1.status == 35){ //已取消
        item.num += item1.totalQty
    }

    if(row.status == 2){
      name= "待确认"
      return name
    }else if(row.status==3){
      name= "待签署"
      return name
    }else if(row.status==3){
      name= "待开提箱单"
      return name
    }else if(row.status==10){
      name= "待提"
      return name
    }else if(row.status==15){
      name= "已提"
      return name
    }else if(row.status==20){
      name= "未还"
      return name
    }else if(row.status==25){
      name= "已还"
      return name
    }else if(row.status==30){
      name= "已完成"
      return name
    }else if(row.status==40){
      name= "待取消"
      return name
    }else if(row.status==35){
      name= "已取消"
      return name
    }
  return name
}
//状态回显集装箱公司
const statusChangXd=(row,item)=>{
  let name=''
  // if(row.status==10){
  //   name=row.payStatus==5 ? '待提未收':'待提已收'
  //   return name
  // }else if(row.status==15){
  //   name=row.payStatus==5 ? '已提未收':'已提已收'
  //   return name
  // }else if(row.status==20){
  //   name=row.payStatus==5 ? '待还未收':'待还已收'
  //   return name
  // }else if(row.status==25){
  //   name=row.payStatus==5 ? '已还未收':'已还已收'
  //   return name
  // }else{
  //   name=item.filter[row.status]
  // }
  if(row.status == 2){
      name= "待确认"
      return name
    }else if(row.status==3){
      name= "待签署"
      return name
    }else if(row.status==3){
      name= "待开提箱单"
      return name
    }else if(row.status==10){
      name= "待提"
      return name
    }else if(row.status==15){
      name= "已提"
      return name
    }else if(row.status==20){
      name= "未还"
      return name
    }else if(row.status==25){
      name= "已还"
      return name
    }else if(row.status==30){
      name= "已完成"
      return name
    }else if(row.status==40){
      name= "待取消"
      return name
    }else if(row.status==35){
      name= "已取消"
      return name
    }

  return name
}
// 安全解析JSON数组
const splitSrray = (row:any) => {
  let newRow = []
  try{
    newRow = JSON.parse(row)
  }catch(e){
    newRow = []
  }
  let newRowStr = ''
  const newRowLength = newRow.length
  if(Array.isArray(newRow)){
    newRow.forEach((item,index) => { 
      if(index < newRowLength - 1){
        newRowStr += item.returnCityName + "、"
      }else{
        newRowStr += item.returnCityName
      } 
    })
  }else{
    newRowStr = newRow.returnCityName
  }
  
  return newRowStr || '--'
}

//状态集装箱公司进口
const statusChangXdJK=(row,item,type)=>{
  let name=''
  if(row.status==25){
    if(type=='hd'){
      name=row.returnedPay==0 ? '已还未收':'已还已收'
    }else if(type=='xd'){
      name=row.returnedPay==0 ? '已还未付':'已还已付'
    }
  return name
}else{
  name=item.filter[row.status]
}
return name
}
//  对象数组 1/1/1 格式展示
function formatCity(list: any, key2: any) {
  list = JSON.parse(list) || [];
  // list = list
  let name = ''
  list.map((item: any, index: number) => {
    if(item[key2]){
      name = name + (index == 0 ? '' : '/') + item[key2]
    }
  })
  return name
}

// 分页数量
const onHandleSizeChange = (val: number) => {
  state.page.pageSize = val;
  // tableInstanceRef.value!.clearSelection();
  emit('pageChange', state.page);
};
// 分页页码
const onHandleCurrentChange = (val: number) => {
  state.page.pageNum = val;
  // tableInstanceRef.value!.clearSelection();
  emit('pageChange', state.page);
};

// 操作栏事件
const handleAction = (command: string, row: any ,type:string = '') => {
  if (!command) return
  emit(command, row ,type);
};

//上传文件 
const uploadSuccess = (list: any, command: string, row: any) => {
  if (!command) return
  row.uploadFiles = list
  emit(command, row);
}


// 多选
watch(() => props.data, async(newVal, oldVal) => {
  props.data = newVal
  await nextTick()
  if(props.isAllCheck){
    await props.data.forEach(row => {
      if(filterIds(props.allId).includes(row.id)){
        tableRef.value.toggleRowSelection(row,true)
      }
    })
  }
});

const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}

const singleCheck = (selection, row) =>{
  if(selection.includes(row)){  //选中操作
    if(!filterIds(props.allId).includes(row.id)){
      props.allId.push(row)
    }
  }else{ // 取消选中操作
    if(filterIds(props.allId).includes(row.id)){
      const index = filterIds(props.allId).indexOf(row.id);
      props.allId.splice(index,1)
    }
  }
  emit("updateSelectAll", props.allId)
}



const checkAll = () => {
  props.data.forEach(item => {
    tableRef.value.toggleRowSelection(item,true)
  })

}
const clearCheckAll = () => {
  tableRef.value.clearSelection()
}


const filterIds = (val:Array)=>{
  let allids = []
  val.forEach(element => {
    allids.push(element.id)
  });
  return allids
}

const handleSortChange = ({ column, prop, order }) =>  {
     // order: 'ascending'（升序）, 'descending'（降序）, null（不排序）
      const sortParams = {
        field: prop,
        isAsc: order === 'ascending' ? 'asc' : (order === 'descending' ? 'desc' : '')
      };
      emit('sortChange', sortParams);
    }
defineExpose({
  multipleSelection,
  checkAll,
  clearCheckAll
})

onMounted(() => {
  // console.log(props.data)
  // nextTick(() => {
    
  // })
})

// 隐藏手机号
const checkHidePhone = (phone) => {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

// 检查操作列是否为空
const checkOperateEmpty = (row, columnItem) => {
  if (!columnItem.buttons || columnItem.buttons.length === 0) {
    return true;
  }
  
  // 检查是否有可见的按钮
  const visibleButtons = columnItem.buttons.filter(button => {
    return button.isShow ? button.isShow(row) : true;
  });
  
  return visibleButtons.length === 0;
};
</script>

<style lang="scss"  scoped>
.productSpan {
  text-decoration: underline;
  cursor: pointer;
  color: #409EFF;
}

.cityName {
  display: inline-block;
  width: 50%;
  height: 100%;
  float: right;
}

.cityName span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.city,
.hdCity {
  display: inline-block;
  width: 60%;
  float: right;
  /* margin-top: 50px; */
}

.carryCity,
.hdCarryCity {
  display: inline-block;
  width: 46%;
  float: left;
}

.city img,
.hdCity img {
  width: 8%;
  float: left;
}

.returnCity,
.hdReturnCityList {
  display: inline-block;
  width: 46%;
  float: left;
}

.city span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.remark {
  display: block;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-overflow {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
}

.span-type{
  display: block;
  font-size: 12px; 
  border: 1px solid #ff0000;
  width: 50px;height: 20px;
  line-height: 16px;
  margin: auto;
  border-radius: 3px;
}
.corol-red{
  color: #FF4242;
}
.corol-blue{
  color: #0364FF;
}
.fee-main{
  display: flex;
  border: 1px solid #eeeeee;
  padding: 10px;
  margin: 10px 0;
}
.fee-item{
  margin-right: 40px;
}
.edit-pen{
  cursor: pointer;
  &:hover{
    color: #FF4242;
  }
}

:deep(.disabled-header-checkbox .el-checkbox) {
  display: none !important;
}
.nameText{
  display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; 
}
.mobileCode{
  margin-right: 5px !important;
}
.daysItem{
  color: #22A86D;
}
.days{
  color: #FF7D0E;
}
.rebiss:last-child .biss {
 display: none;
}

</style>
